<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<fmt:setLocale value="${config.locale.language}"/>
<fmt:setBundle basename="vn.ugame.bundle.Language" var="languageBundle"/>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>UGame | Item</title>

        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/js/jquery.raty.min.js"></script>
        <script type="text/javascript" src="/js/iscroll.js"></script>
        <script type="text/javascript" src="/js/date.format.js"></script>
        <script type="text/javascript" src="/js/jquery.timers.js"></script>
        <script type="text/javascript" src="/js/ugame.js"></script>

        <link rel="stylesheet" href="/css/style.css" type="text/css"/>
        <link rel="stylesheet" href="/css/game.css" type="text/css"/>       
    </head>
    <body>
        <div id="wrapper">
            <div id="main-scroller">
                <jsp:include page="template/header.jsp" flush="false"/>
                <div id="main" class="default-panel">
                    <input type="hidden" value="${item.id}" id="item-id"/>
                    <div id="game-banner" class="default-panel">
                        <img src="<c:url value="/image-engine/${item.id}/4"/>" alt=""/>
                    </div><!-- End #game-banner -->
                    <div id="game-info" class="default-panel">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td valign="top">
                                    <div id="game-icon">
                                        <div class="rating"></div>
                                        <script type="text/javascript">
                                            $('.rating').raty({
                                                readOnly : true,
                                                score    : <c:out value="${item.rate}"/>,
                                                size: 9,
                                                width: 84
                                            });
                                        </script>
                                        <img src="<c:url value="/image-engine/${item.id}/2"/>" 
                                             alt="" id="icon"/>
                                    </div>
                                    <!-- End #game-icon -->
                                </td>
                                <td valign="top">
                                    <h4 class="touch"><c:out value="${item.text}"/></h4>
                                    <span class="text-effect-1 price touch">
                                        <c:if test="${item.price > 0}">
                                            <c:if test="${config.locale.language == 'en-us'}">
                                                <fmt:formatNumber 
                                                    value="${item.price * rateOfCurrency}" 
                                                    type="currency"/>
                                            </c:if>
                                            <c:if test="${config.locale.language == 'vi-vn'}">
                                                <fmt:formatNumber 
                                                    value="${item.price * rateOfCurrency}" 
                                                    type="number"
                                                    maxFractionDigits="0"/>K
                                            </c:if>
                                            (<fmt:formatNumber value="${item.price}" 
                                                              type="number" 
                                                              maxFractionDigits="0" /> ucoin)
                                        </c:if>
                                        <c:if test="${item.price == 0}">free!</c:if>
                                    </span>
                                    <p class="touch">
                                        <span>
                                            <fmt:message 
                                                key="ugame.game.size" 
                                                bundle="${languageBundle}"/>
                                            <c:out value=": "/>
                                        </span>
                                        <c:out value="${item.size} bytes"/>
                                    </p>
                                    <p class="touch"><span><fmt:message 
                                                key="ugame.game.downloads" 
                                                bundle="${languageBundle}"/>
                                            <c:out value=": "/></span>
                                            <fmt:formatNumber 
                                                value="${item.downloadNumber}" 
                                                type="number" 
                                                groupingUsed="false" />
                                    </p>
                                    <p class="touch"><span><fmt:message 
                                                key="ugame.game.category" 
                                                bundle="${languageBundle}"/>
                                            <c:out value=": "/></span>
                                        <c:out value="${item.category.text}"/></p>
                                    <p class="touch"><span><fmt:message 
                                                key="ugame.game.updated" 
                                                bundle="${languageBundle}"/>
                                            <c:out value=": "/></span>
                                            <fmt:formatDate 
                                                type="date" 
                                                value="${item.modifiedDate}"/>
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div id="btn-download" class="button-style-1">
                                        <c:if test="${sessionScope.AuthPrincipal == null}">
                                            <a href="#" class="text-effect-1 btn-label"
                                               onclick='alert("<fmt:message 
                                                   key="ugame.exception-15" 
                                                   bundle="${languageBundle}"/>");'>
                                               <fmt:message 
                                                   key="ugame.game.btn.download" 
                                                   bundle="${languageBundle}"/>
                                            </a>
                                        </c:if>
                                        <c:if test="${sessionScope.AuthPrincipal != null}">
                                            <a href="<c:url value="/download/${item.id}"/>" 
                                               class="text-effect-1 btn-label">
                                                <fmt:message 
                                                    key="ugame.game.btn.download" 
                                                    bundle="${languageBundle}"/>
                                            </a>
                                        </c:if>
                                    </div>
                                    <div id="btn-love">
                                        <a href="#" class="text-effect-1 btn-label">
                                            <fmt:message 
                                                key="ugame.game.btn.love" 
                                                bundle="${languageBundle}"/></a>
                                    </div>
                                    <div id="btn-share">
                                        <a href="#" class="text-effect-1 btn-label">
                                            <fmt:message 
                                                key="ugame.game.btn.share" 
                                                bundle="${languageBundle}"/></a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div><!-- End #game-info -->
                    <div id="game-description" class="default-panel expandable collapsed">
                        <div class="content touch">
                            <c:out escapeXml="false" value="${item.description}"/>
                        </div>
                        <div class="control-panel">
                            <div class="overlayout">
                            </div>
                            <div class="split-bar">
                                <a href="#" class="expand-button expand-button-1" onclick="return false;"></a>
                            </div>
                        </div>
                    </div>
                    <!-- End #game-description -->
                    <div id="item-screenshot" class="default-panel">
                        <div id="item-screenshot-slider" class="slider-2">
                            <div class="scroller" style="width: 8000px;">
                                <c:forEach items="${screenShots}" var="image">
                                    <div class="slider-item"><img src="<c:url value="${image.path}" />"/></div>
                                    </c:forEach>
                            </div><!-- End .scroller -->
                        </div><!-- End #item-screenshot-slider -->
                    </div><!-- End #item-screenshot -->

                    <div id="game-comment" class="default-panel panel-style-1">
                        <div class="caption">
                            <p><fmt:message 
                                    key="ugame.game.comment" 
                                    bundle="${languageBundle}"/></p>
                        </div>
                        <div id="page-nav" class="default-panel">
                            <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <a href="#" id="comment-prev-btn" onclick="return false" class="prev-button-1"></a>
                                    </td>
                                    <td>
                                        <span id="comment-page-number"></span>
                                        <fmt:message 
                                            key="ugame.game.page-comment-1" 
                                            bundle="${languageBundle}"/>
                                        <span id="comment-page-count"></span>
                                        <fmt:message 
                                            key="ugame.game.page-comment-2" 
                                            bundle="${languageBundle}"/>
                                    </td>
                                    <td>
                                        <a href="#" id="comment-next-btn" onclick="return false" class="next-button-1"></a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!-- End #page-nav -->
                        <div id="comment-list" class="default-panel">
                        </div>
                        <div id="comment-form" class="default-panel">
                            <table cellspacing="0" cellpadding="0">
                                <tr>
                                    <td>
                                        <span class="text-input-left"></span>
                                    </td>
                                    <td>
                                        <input type="hidden" id="locale" value="${config.locale.language}"/>
                                        <textarea id="txt-comment" 
                                                  class="placeholder-effect input"
                                                  placeholder="<fmt:message 
                                                      key="ugame.game.write-comment" 
                                                      bundle="${languageBundle}"/>"></textarea>
                                    </td>
                                    <td>
                                        <span class="text-input-right"></span>
                                    </td>
                                    <td>
                                        <div class="button-style-2">
                                            <c:if test="${sessionScope.AuthPrincipal == null}">
                                                <a href="#" id="btn-send" class="text-effect-1"
                                                   onclick='alert("<fmt:message 
                                                       key="ugame.exception-16" 
                                                       bundle="${languageBundle}"/>");'>
                                                   <fmt:message 
                                                       key="ugame.game.btn.send" 
                                                       bundle="${languageBundle}"/>
                                                </a>
                                            </c:if>
                                            <c:if test="${sessionScope.AuthPrincipal != null}">
                                                <a href="#" id="btn-send" class="text-effect-1"
                                                   onclick='return false;'>
                                                    <fmt:message 
                                                        key="ugame.game.btn.send" 
                                                        bundle="${languageBundle}"/>
                                                </a>
                                            </c:if>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!-- End #comment-form -->  
                    </div><!-- End #game-comment -->

                    <div id="game-relate" class="default-panel panel-style-1">
                        <div class="caption"><p>Ứng dụng liên quan</p></div>
                        <c:forEach var="item" items="${relatedItems}">
                            <div class="item default-panel">
                                <div class="item-title default-panel">
                                    <p class="title touch">
                                        <a href="<c:url value="/${item.module.name}/${item.name}/${item.id}"/>">
                                            <c:out value="${item.text}"/>
                                        </a>
                                        <span class="text-effect-1 price touch">
                                            <c:if test="${item.price > 0}">
                                                <c:if test="${config.locale.language == 'en-us'}">                                            
                                                    <fmt:formatNumber 
                                                        value="${item.price * rateOfCurrency}" 
                                                        type="currency"/>
                                                </c:if>
                                                <c:if test="${config.locale.language == 'vi-vn'}">
                                                    <fmt:formatNumber 
                                                        value="${item.price * rateOfCurrency}" 
                                                        type="number"
                                                        maxFractionDigits="0"/>K
                                                </c:if>
                                            </c:if>
                                            <c:if test="${item.price == 0}">
                                                free!
                                            </c:if>
                                        </span>
                                    </p>        
                                    <div id="star-<c:out value="${item.id}"/>" class="star"></div>
                                    <script type="text/javascript">
                                        $('#star-<c:out value="${item.id}"/>').raty({
                                            readOnly : true,
                                            score    : <c:out value="${item.rate}"/>,
                                            size: 12
                                        });
                                    </script>
                                </div>
                                <!-- End .item-title -->

                                <div class="item-main-content default-panel">
                                    <table width="100%" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td width="45px">
                                                <a href="<c:url value="/${item.module.name}/${item.name}/${item.id}"/>">
                                                    <div class="status status-<c:out value="${item.status}"/>">
                                                    </div>
                                                    <!-- End .status -->
                                                    <img class="game-icon" src="<c:url value="/image-engine/${item.id}/1" />" alt=""/>
                                                </a>
                                            </td>
                                            <td valign="top">
                                                <a href="<c:url value="/${item.module.name}/${item.name}/${item.id}"/>">
                                                    <div class="content touch">
                                                        <span>
                                                            <fmt:message 
                                                                key="ugame.loves" 
                                                                bundle="${languageBundle}"/><c:out value=": ${item.loveNumber}"/>
                                                        </span>
                                                        <p><c:out value="${item.summary}"/></p>
                                                    </div>
                                                    <!-- End .content -->
                                                </a>
                                            </td>
                                            <td width="50px">   
                                                <c:if test="${sessionScope.AuthPrincipal == null}">
                                                    <a class="download-button-1" 
                                                       href="#" 
                                                       onclick='alert("<fmt:message 
                                                           key="ugame.exception-15" 
                                                           bundle="${languageBundle}"/>");return false;'>
                                                    </a>
                                                </c:if>
                                                <c:if test="${sessionScope.AuthPrincipal != null}">
                                                    <a class="download-button-1" 
                                                       href="<c:url value="/download/${item.id}"/>"></a>
                                                </c:if>
                                                <span class="download-number">
                                                    (<fmt:formatNumber 
                                                        value="${item.downloadNumber}" 
                                                        type="number" 
                                                        groupingUsed="false" />)
                                                </span> 
                                                <!-- End .action -->
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <!-- End .item-main-content -->
                            </div>
                        </c:forEach>
                    </div>
                    <!-- End #game-relate -->

                    <div class="clear"></div>
                </div>
                <!-- End #main -->
                <jsp:include page="template/footer.jsp" flush="false"/>

                <div class="clear"></div>
            </div>
        </div>        
        <!-- End #wrapper-->
        <script type="text/javascript" src="/js/template.js"></script>
        <script type="text/javascript" src="/js/item.js"></script>
    </body>
</html>